<template>
  <baseCard
    :title="'用户访问情况'"
    :height="'2rem'"
    :contentPadding="'0.2rem 0.2rem 0.2rem 0.18rem'"
    style="margin-left: 0; margin-right: 0"
  >
    <div class="vpt-user-visitor-warpper">
      <div class="vpt-user-visitor-left">
        <img class="icon" src="@/assets/img/theme2/icon-user.png" />
        <label>当前在线人数</label>
        <div class="online-value">
          {{ addThousandsSeparator(usercount.count ? usercount.count : "-") }}
        </div>
        <div class="bottom">
          <div class="label">当日在线人数峰值</div>
          <div class="value">
            {{
              addThousandsSeparator(
                usercount.todayMaxCount ? usercount.todayMaxCount : "-"
              )
            }}
          </div>
        </div>
      </div>
      <div class="vpt-user-visitor-left">
        <img class="icon" src="@/assets/img/theme2/icon-user.png" />
        <label>累计访问人次</label>
        <div class="online-value">
          {{
            addThousandsSeparator(usercount.allCount ? usercount.allCount : "-")
          }}
        </div>
        <div class="bottom">
          <div class="label">当前访问人数</div>
          <div class="value">
            {{
              addThousandsSeparator(
                usercount.todayCount ? usercount.todayCount : "-"
              )
            }}
          </div>
        </div>
        <!-- <div class="online-value">
          {{
            addThousandsSeparator(
              userAccess.total_num ? userAccess.total_num : "-"
            )
          }}
        </div>
        <div class="bottom">
          <div class="label">当前访问人数</div>
          <div class="value">
            {{
              addThousandsSeparator(
                userAccess.total_num_day ? userAccess.total_num_day : "-"
              )
            }}
          </div>
        </div> -->
      </div>
      <div class="vpt-user-visitor-right">
        <section class="vpt-left">
          <header class="title">注册用户数</header>
          <div class="value">
            {{
              addThousandsSeparator(
                userAccess.user_num ? userAccess.user_num : "-"
              )
            }}
          </div>
          <div class="bottom">
            <div class="b-label">其中省本级</div>
            <div class="b-value">
              {{
                addThousandsSeparator(
                  userAccess.user_num_sbj ? userAccess.user_num_sbj : "-"
                )
              }}
            </div>
          </div>
        </section>
        <section class="vpt-right">
          <div class="vpt-right-item" v-for="(item, i) in dataList" :key="i">
            <label>{{ item.title }}</label>
            <div>
              {{
                addThousandsSeparator(
                  userAccess[item.value] ? userAccess[item.value] : "-"
                )
              }}
            </div>
          </div>
        </section>
      </div>
    </div>
  </baseCard>
</template>
<script setup>
//用户访问情况
import { computed, ref } from "vue";
import baseCard from "@/components/vpt-cards-1002/index.vue";
import { numberToCurrencyNo } from "@/utils/formatter.js";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  usercount:{
    type: Object,
    default: () => {
      return {};
    },
  },
  userAccess: {
    type: Object,
    default: () => {
      return {};
    },
  },
  userNumber: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  porvNumber: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  userSessionNumber: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  dataList: {
    type: Array,
    default: () => {
      return [
        { title: "财政用户", value: "vuser_num_cz" },
        { title: "单位财务用户数", value: "user_num_cw" },
        { title: "单位非财务用户", value: "user_num_fcw" },
        { title: "系统运维人员", value: "user_num_yw" },
        { title: "其他", value: "user_num_qt" },
      ];
    },
  },
});

const userSessionNumberCache = computed(() => {
  return numberToCurrencyNo(props.userSessionNumber);
});

const userNumberCache = computed(() => {
  return numberToCurrencyNo(props.userNumber);
});
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
